// functions should started with "fn_"
// fn_bg_img
.fn_bg_img( @width: 0, @height: 0) {
    background-size: contain;
    background-repeat: no-repeat;
    width: @width;
    height: @height;
}
// set the transparency
.fn_bg_transparency(@degree){
	opacity:@degree/100;
	filter:alpha(opacity=@degree);
}

// set unknow height element to center of page
.fn_vertical_center() {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
} 

// wrapping long word - need testing
.fn_word_break(){
	white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */		
    overflow: hidden;
    word-break: break-all;
}


// set y scrollbar only
.fn_overflow_y(){
	overflow-x:hidden;
	overflow-y:auto; 
}
// set x scrollbar only
.fn_overflow_x(){
	overflow-x:auto;
	overflow-y:hidden;
	white-space: nowrap; 
}
 
.fn_animation(@animation){
    animation:@animation;
	-moz-animation:@animation; /* Firefox */
	-webkit-animation:@animation; /* Safari and Chrome */
	-o-animation:@animation; /* Opera */
}
 

// fn_inline_block
.fn_inline_block(){
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	overflow:hidden;
}

.fn_text_overflow(){
	overflow: hidden;
	white-space: nowrap;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

// box sizing
.fn_box_sizing(){
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
}

// rotate
.fn_rotate(@degree){
	transform: rotate(@degree);
	-ms-transform: rotate(@degree);		/* IE 9 */
	-webkit-transform: rotate(@degree);	/* Safari and Chrome */
	-o-transform: rotate(@degree);		/* Opera */
	-moz-transform: rotate(@degree);		/* Firefox */
}
 
// set border radius
.fn_border_radius(@radius){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius; 
}

// Drop shadows
.fn_box_shadow(@shadow){
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}  

